<template>
	<div class="section productBg" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style=" 'height:' +sectionHeight + 'px;' ">

		<el-row :gutter="24" class="newsTitleArea">
			<el-col :xs="20" :sm="20" :md="20" :lg="21" :xl="22" class="newsTitle">
				<div class="title_cn">钢投特钢产品展厅</div>
				<div class="title_en">PRODUCT EXHIBITION HALL</div>
			</el-col>
			<el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="2" class="newsDetile">
				<div  @click="goToList()"  class="detileBtn">{{$t("more")}} <i class="el-icon-d-arrow-right"></i></div>
			</el-col>

		</el-row>
		<el-row :gutter="24" style="width: 100%; height: max-content;">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

				<!-- 实力展示 -->
				<el-row style="display: flex;flex-direction: column;">
					<el-col :span="24">
						<el-card class="box-card" shadow="never"
							style="height: max-content;background: none;border: none;position: relative;">
							<!-- 轮播图-大 -->
							<div class="swiper-container" ref="productImage" id="productImage" style="height: 25vh;">
								<div class="swiper-wrapper">
									<div  class="swiper-slide" style="height: 25vh;"
										v-for="(slide, index) in productImageSlideList" :key="index">
										<img :src="slide.fileUrl" alt="Image" style="width: 100%; height: 100%;" />
										<div class="productTitleArea">
											<div @click="goToProjectInfo(slide.productId)" class="productTitle">
												{{slide.title}}
											</div>
											<div class="productContent">
												<el-row :gutter="50">
													<el-col :span="18">
														<div @click="goToProjectInfo(slide.productId)"
															style="width: 100%;height: 72px; display: -webkit-box;	-webkit-line-clamp: 3;	-webkit-box-orient: vertical;	overflow: hidden; padding: 0px 0px;line-height: 25px;text-align: left;">
															{{$request.formartContent(slide.content,70)}}
														</div>
													</el-col>
													<el-col :span="2">&nbsp;</el-col>
													<el-col :span="4" :style="slide.productId">
														<div @click="goToProjectInfo(slide.productId)"
															style="width: 100%;height: 110px;position: relative; z-index: 999999000;">
															<div   class="proDetileBtn">{{$t("moreDetails")}} <i class="el-icon-d-arrow-right"></i></div>
														</div>
													</el-col>
												</el-row>

											</div>
											<div class="productItemBg"></div>
										</div>
									</div>
								</div>
								<div class="swiper-pagination"></div>
							</div>
							<!-- 缩略图 -->
							<div class="swiper-container-thumbnails" ref="product" id="product"
								style="height: 29vh;width:100%;margin: 0 auto;margin-top: 2vh;">
								<div class="swiper-wrapper" style="height: 25vh;width:100%; margin: 0 auto;">
									<div :class="'swiper-slide '+ (index==0?'new-active-class':'') "
										style="height: 25vh; width: 50%;" v-for="(image, index) in productSlideList"
										:key="index">
										<el-card class="slide-content productTypeCard"
											style="height:25vh;padding:4.5vh 0; background-color: #FFF;	transition: transform 0.3s ease;">
											<div class="productTypeNameArea">
												<div class="productIcon">
													<img :src="image.productIconUrl"
														style="height: 6vh;width: 6vh;object-fit: fill;" />
												</div>
												<div class="productTypeName">
													{{image.productMainName}}
												</div>
											</div>

										</el-card>
									</div>
								</div>
							</div>

						</el-card>
					</el-col>
				</el-row>
			
			</el-col>

		</el-row>
		
		</el-row>
<!-- 		<el-row :gutter="24" style="width: 75%; height: 400px;">

		</el-row> -->
	</div>
</template>

<script>
	// 导入您需要的模块
	import Swiper from "swiper";
	import {
		forEach
	} from "../../utils/tools";
	export default {
		name: 'Products',
		props: {
			sectionHeight: Number
		},
		components: {},
		created() {
			this.bindProductMain().then(data => {
				this.initProductSwiper();
				this.initProductImageSwiper();

			});
		},
		mounted() {

			// this.getMenuList();
		},
		data() {
			return {
				productImageSlideList: [],
				productSlideList: [],
				productImageSwiper: null,
				productSwiper: null,
			}
		},
		methods: {



			bindProductMain() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.getProductMain(params).then(res => {
						that.formartProductList(res);
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			formartProductList(res) {
				let that = this;
				console.log('res.data', res.data)
				let arr = [];
				res.data.forEach(function(element) {
					let bigImg = {
						title: element.productMainName,
						content: element.content,
						productId: element.id,
						fileUrl: element.productMainFileList.length > 0 ? element.productMainFileList[0]
							.fileUrl : ''
					}
					arr.push(bigImg);
				});
				that.productSlideList = res.data;
				that.productImageSlideList = arr;

			},
			initProductSwiper() {
				let that = this;
				new Swiper('#productImage', {
					// loop:true,
					autoplay: {
						delay: 3000, // 自动切换的时间间隔，单位为毫秒
						disableOnInteraction: true // 用户操作后是否停止自动切换，默认为true
					},
					// 主要的Swiper轮播图配置
					// pagination: {
					// 	el: '.swiper-pagination',
					// 	clickable: true,
					// },

					on: {
						slideChange: function() {
							var currentIndex = this.activeIndex; // 获取当前索引
							console.log('var currentIndex = this.activeIndex; 获取当前索引', currentIndex)
							// 执行相关操作
							that.changeThumbnail(currentIndex);
						}
					},
					thumbs: {
						swiper: new Swiper('.swiper-container-thumbnails', {
							// 缩略图Swiper配置
							slidesPerView: 2,
							spaceBetween: 5,
							freeMode: true,
							watchSlidesVisibility: true,
							watchSlidesProgress: true,
						})
					}
				})
			},
			initProductImageSwiper() {

			},

			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {
				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
			},
			goToList() {
				this.$router.push({
					name: this.$t('mainProducts'),
					 
				});
			},
			goToProjectInfo(id) {
				this.$router.push({
					name: this.$t('mainProductsInfo'),
					query: {
						id: id
					}
				});
			},
			//缩略图改变触发方法
			changeThumbnail(index) {
				const thumbnailsContainer = this.$refs.product;
				if (thumbnailsContainer) {
					const bElements = thumbnailsContainer.querySelectorAll('.swiper-wrapper .swiper-slide');
					const thirdBElement = bElements[index];
					bElements.forEach((bElement, index) => {
						bElement.classList.remove('new-active-class');
					});
					thirdBElement.classList.add('new-active-class'); // 添加一个新的class
				}
			},
			//轮播图跳转
			goToSlide(index) {
				//	this.swiper.slideTo(index + 1); // +1 是因为主swiper的第一张是loop模式下的最后一张
			},

		},
		beforeDestroy() {

		},
		watch: {

		}
	};
</script>

<style scoped>
	.productBg {
		width: 100%;
		height: 100%;
		background: url("../../assets/img/bg_home_product.jpg") no-repeat;
		background-size: cover;
		background-position: center;
		cursor: pointer;
		/* padding-top: 100px; */
	}

	.newsTitleArea {
		width: 90%;
		height: 50px;
	}

	.title_cn {
		font-size: 18px;
		font-weight: bold;
		border-left: 4px solid #0484D7;
		padding-left: 10px;
		height: 22px;
		line-height: 22px;
	}

	.title_en {
		font-size: 12px;
		font-style: italic;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
	}

	.detileBtn {
		height: 30px;
		line-height: 30px;
		width: 80px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 12px;
		/* margin-top: 10px; */
		position: absolute;
		right: 0px;
		top: 10px;
	}

	.productsmin {
		/* 		border: 1px solid red; */
		width: 75%;
		height: 200px;
	}

	#product {
		overflow: hidden;
		margin-top: 2vh;
	}

	.productBg .swiper-button-prev {
		left: -60px;
		z-index: 9999999;
		top: calc(52vh + 16vh);
	}

	.productBg .swiper-button-next {
		right: -60px;
		z-index: 9999999;
		top: calc(52vh + 16vh);
	}

	.productBg .productIcon {
		height: 6vh;
		width: 6vh;
		margin: auto;
	}

	.productBg .productTypeName {
		height: 8vh;
		line-height: 8vh;
		align-items: center;
		width: 100%;
		text-align: center;
		font-size: 1em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0px 10px;
	}

	.productTypeCard:hover {
		/* transform: scale(0.9) */
	}

	.productBg .swiper-button-next {
		right: 0px;
	}

	.productBg .swiper-button-prev {
		left: 0px;
	}

	.productBg .productTitleArea {
		width: 100%;
		height: 110px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 999;
	}

	.productBg .productTitle {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #FFF;
		font-size: 18px;
		width: 100%;
		padding: 0px 10px 0px 20px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		bottom: 85px;
		left: 0px;
		z-index: 9999;
	}

	.productBg .productContent {
		height: 74px;
		font-size: 0.8em;
		line-height: 25px;
		color: #FFF;
		font-weight: 530;
		color: #FFF;
		width: 100%;
		padding: 0px 10px 0px 20px;
		position: absolute;
		bottom: 5px;
		left: 0px;
		z-index: 9999;
/* 		word-wrap: break-word; */
		
		/* 显示省略号 */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		
	}

	.productBg .productItemBg {
		width: 100%;
		height: 120px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 99;
		background-color: black;
		opacity: 0.2;
	}


	.productBg .proDetileBtn {
		height: 30px;
		line-height: 30px;
		width: 80px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 12px;
		/* margin-top: 10px; */
		position: absolute;
		right: -38px;
		top: 10px;
	}


	.productBg .proDetileBtn:hover {
		opacity: 0.8;
	}

	#product .swiper-slide {
		/* opacity: 0.5; */

	}

	.new-active-class .productTypeCard {
		/* opacity: 1 !important; */
		border: 1px solid #0484D7;
		/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1) */
	}

	.new-active-class .productIcon {
		transform: scale(1.3)
	}

	.new-active-class .productTypeName {
		font-weight: 530;
		font-size: 1em;
		color: #0484D7;
	}
	::v-deep .el-card__body{
		padding: 0px 20px;
	}
</style>